<template>
    <div class="page-order-init">
        <Navigator>
            <template v-slot:center>
                <div class="page-haeder">确认订单</div>
            </template>
        </Navigator>

        <div class="page-body">
            <PickInfo @change-method="changePickMethod" />
            <PayInfo @change="changePayMethod" />
            <DiscountInfo />
            <OrderInfo :orderList="orderList" />
            <PayFooter :pricePay="cartPricePay" @create-order="createOrder" />
        </div>
    </div>
</template>

<script>
import Navigator from "@/components/common/navigator/index";
import PickInfo from "./components/pickInfo/index";
import PayInfo from "./components/payInfo/index";
import DiscountInfo from "./components/discountInfo/index";
import OrderInfo from "./components/orderInfo/index";
import PayFooter from "./components/payFooter/index";

import bus from "@/utils/bus";

export default {
    components: {
        Navigator,
        PickInfo,
        PayInfo,
        DiscountInfo,
        OrderInfo,
        PayFooter
    },
    data() {
        return {
            order: {
                initTime: new Date().getTime(),
                payMethod: "wechat",
                pickMethod: "arrival", // take
                pickTime: "immediate", // 10 20 30
                userId: "",
                openId: "",
                telephone: "",
                userInfo: {},
                discountInfo: null
            }
        };
    },

    computed: {
        orderList() {
            return this.$store.getters.cartMapList;
        },
        cartPricePay() {
            const cartMapList = this.$store.getters.cartMapList;
            let pricePay = 0;
            cartMapList.map(i => {
                pricePay += i.pricePay;
            });
            return pricePay;
        }
    },

    methods: {
        createOrder() {
            const orderRequest = {
                ...this.order,
                deviceId: this.$reporter.getDeviceId(),
                cartMapList: this.orderList,
                orderList: this.$store.state.cartList,
                cartList: this.$store.state.cartList,
                orderPricePay: this.cartPricePay,
                points: this.cartPricePay * 10.0
            };
            console.log("createOrder", orderRequest);

            this.$cloudApi
                .createOrder({
                    data: orderRequest
                })
                .then(res => {
                    this.onCreateOrder();
                });

            this.$router.replace({
                path: "/order",
                query: this.$route.query
            });
        },
        changePayMethod({ name }) {
            this.order.payMethod = name;
            console.log("changePayMethod", this.order.payMethod);
        },
        changePickMethod({ name }) {
            this.order.pickMethod = name;
            console.log("changePickMethod", this.order.pickMethod);
        },

        onCreateOrder() {
            console.log("下单成功");
            this.$showToast({ title: "下单成功" });
            this.$store.commit("clearCart", {});

            this.$bus.$emit("createOrder");
        }
    }
};
</script>


<style lang="less" scoped>
.page-order-init {
    padding: 100px 0 100px 0;
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;

    .page-haeder {
        height: 100px;
        line-height: 100px;
    }

    .page-body {
        height: 100%;
        background: #f5f5f5;
        overflow-y: scroll;
    }
}
</style>